<template>
  <div class="register_background" v-show="show" :style="moveStyle">
    <div class="register_box">
        <div class="login ">
          <div class="login_form">
            <span>用户名：</span>
            <input type="text" placeholder="请输入用户名" v-model.trim="username">          
            <span>密码：</span>
            <input type="password" placeholder="请输入密码" v-model.trim="password">
          </div>
          <div class="btn">
            <!-- 使用 Element UI 的按钮和点击事件 -->
            <el-button class="login_btn" type="primary" @click="register">注册</el-button>
          </div>
        </div>     
    </div>
  </div>
</template>

<script>
import { Notification } from 'element-ui';

export default {
  name: 'Register',
  data() {
    return {
      //初始化
      username: "",
      password: "",
      show: false,
      moveStyle: {}
    };
  },
  methods: {
    register: function () {
      //检查用户名和密码是否为空
      if (this.username === '') {
        Notification.warning({
          title: '警告',
          message: '用户名不能为空'
        });
        return;
      }
      if (this.password === '') {//
        Notification.warning({
          title: '警告',
          message: '密码不能为空'
        });
        return;
      }
      //检查用户名是否已存在于localStorage中
      //localStorage 用于在用户的浏览器中存储数据
      if (localStorage.getItem('username') === this.username) {
        Notification.error({
          title: '错误',
          message: '用户名已存在'
        });
      } else {
        localStorage.setItem('username', this.username);
        localStorage.setItem('password', this.password);
        Notification.success({
          title: '成功',
          message: '注册成功！'
        });
        this.$router.replace('/welcome');//跳转路由
      }
    }
  }
};
</script>

<style scoped>
.register_background {
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  background-color: #c0e8ff;
  border-radius: 7px;
  width: 320px;
  height: 500px;
  position: fixed;
  margin-top: -60px;
  transition: all 0.5s;
}

.login_form {
  padding: 20px;
  /* color: white; */

}


.register_box {
  padding: 72px 0px;
}



.login_btn:hover {
  box-shadow: 2px 2px 15px 2px rgb(37, 43, 48);
  background-color: transparent;
  color: white;
  /* 选择动画 */
  animation: login_mation 0.5s;
}

.login_btn {
  background-color: rgba(255, 255, 255, 0.582);
  border: 1px solid rgb(190, 225, 255);
  padding: 10px;
  width: 150px;
  height: 60px;
  border-radius: 30px;
  font-size: 20px;
  color: rgb(100, 183, 255);
  font-weight: 100;
  margin-top: 15px;
  margin-left: 75px;
}

.login_form input {
  background-color: transparent;
  width: 250px;
  padding: 2px;
  text-indent: 2px;
  color: white;
  font-size: 20px;
  height: 45px;
  margin: 30px 30px 30px 5px;
  outline: none;
  border: 0;
  border-bottom: 1px solid rgb(36, 42, 45);
}

.login_form span {
  color: rgb(96, 128, 0);
  font-size: 20px;
  font-weight: 400;
}
</style>